<template>
  <div class="container">
    <h2>信息统计管理</h2>

    <!-- 柱状图容器 -->
    <div class="chart-container">
      <div
          v-show="chartData.length > 0"
          ref="barChartRef"
          class="chart"
          :style="{ width: chartWidth }"
      ></div>
    </div>

    <h3>医院粉丝统计</h3>

    <el-row :gutter="16">
      <el-col :span="12">
        <div class="statistic-card">
          <el-statistic :value="hospitalFansCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                医院关注数量
                <el-tooltip
                    effect="dark"
                    content="关注医院的总用户数量"
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>较上月</span>
              <span class="green" v-if="hospitalFansTrend === 'up'">
                {{ hospitalFansChange }}%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
              <span class="red" v-else>
                {{ hospitalFansChange }}%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="statistic-card">
          <el-statistic :value="departmentFansCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                科室关注数量
                <el-tooltip
                    effect="dark"
                    content="关注所有科室的总用户数量"
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>较上月</span>
              <span class="green" v-if="departmentFansTrend === 'up'">
                {{ departmentFansChange }}%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
              <span class="red" v-else>
                {{ departmentFansChange }}%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted, ref, computed } from "vue";
import axios from "axios";
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'

// Register required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const barChartRef = ref(null);
const hospitalName = ref('北京大学第三医院');
const chartData = ref([]); // 挂号数据
let barChart = null;

// 关注数据相关
const hospitalFansCount = ref(0);
const departmentFansCount = ref(0);
const hospitalFansChange = ref(0);
const departmentFansChange = ref(0);
const hospitalFansTrend = ref('up');
const departmentFansTrend = ref('up');

// 计算柱状图宽度
const chartWidth = computed(() => {
  const baseWidth = 600;
  const itemWidth = 80;
  const minWidth = baseWidth;
  const calculatedWidth = Math.max(minWidth, chartData.value.length * itemWidth);
  return `${calculatedWidth}px`;
});

const fetchData = () => {
  // 获取挂号数据
  axios.get('/rankRecord/getRankCount', {
    params: { hospitalName: hospitalName.value }
  }).then(response => {
    if (response.data?.code === 200) {
      chartData.value = response.data.data;
      console.log(response.data.data)
      updateBarChart();
    }
  }).catch(console.error);

  // 新增：获取关注数据
  // 获取关注数据
  axios.get('/followHospital/getFanCount', {
    params: { hospitalName: hospitalName.value }
  }).then(response => {
    if (response.data?.code === 200) {
      hospitalFansCount.value = response.data.data.hosCount;
      departmentFansCount.value = response.data.data.clinicCount;
    }
  }).catch(console.error);
};

const updateBarChart = () => {
  if (!barChart) {
    barChart = echarts.init(barChartRef.value);
  }

  barChart.setOption({
    title: {
      text: `${hospitalName.value}科室挂号统计`,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: chartData.value.map(item => item.clinicName),
      axisLabel: { rotate: 30 }
    },
    yAxis: { type: 'value', name: '挂号数量' },
    series: [{
      type: 'bar',
      data: chartData.value.map(item => item.registerCount),
      itemStyle: { color: '#409EFF' },
      label: { show: true }
    }]
  });
};

onMounted(() => {
  barChart = echarts.init(barChartRef.value);
  fetchData();
});
</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.chart-container {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.chart {
  height: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 20px;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

h3{
  font-size: 21px;
  text-align: center;
  margin: 30px;
}
</style>